<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper" v-action:query>
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="手机号">
                <a-input v-model="queryParam.phone" placeholder="请输入手机号"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => (this.queryParam = {})">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table
        ref="table"
        size="default"
        rowKey="key"
        bordered
        :columns="columns"
        :data="loadData"
        showPagination="auto"
      >
        <span slot="addtime" slot-scope="text">
          <span>{{ new Date(text * 1000).toLocaleString() }}</span>
        </span>
        <span slot="price" slot-scope="text">
          <ellipsis :length="40" tooltip>{{ text }}元</ellipsis>
        </span>
        <span slot="nickname" slot-scope="text">
          <ellipsis :length="10" tooltip>{{ text ? text : '暂未设置' }}</ellipsis>
        </span>
        <span slot="address" slot-scope="text">
          <ellipsis :length="30" tooltip>{{ text ? text : '暂未设置'  }}</ellipsis>
        </span>
        <span slot="company" slot-scope="text">
          <a-tag color="green">
            <ellipsis :length="30" tooltip>{{ text }}</ellipsis>
          </a-tag>
        </span>
        <span slot="state" slot-scope="text">
          <a-tag color="orange" v-if="text == 1">未支付</a-tag>
          <a-tag color="green" v-else-if="text == 2"> 已支付</a-tag>
          <a-tag color="blue" v-else-if="text == 3"> 已完成</a-tag>
        </span>
        <span slot="action" slot-scope="text, record">
          <a-button style="margin-right: 8px" type="link" size="small" @click="showInfo(record)">订单详情 </a-button>
          <!-- <a-divider type="vertical" />
          <a-popconfirm title="您确定此订单已完成吗?" ok-text="确定" cancel-text="点错了" @confirm="finishOrder(record)">
						<a-button v-action:delete style="margin-right: 8px" type="link" size="small">完成订单
						</a-button>
					</a-popconfirm> -->
        </span>
      </s-table>
    </a-card>
    <OrderInfoForm ref="orderInfoForm" :model="mdl"></OrderInfoForm>
  </page-header-wrapper>
</template>

<script>
import storage from 'store'
import OrderInfoForm from './modules/OrderInfoForm'
import { STable, Ellipsis } from '@/components' 

import { GetOrderList, FinishOrder } from '@/api/orderManage'

const columns = [
  {
    title: '用户名',
    dataIndex: 'nickname',
    scopedSlots: {
      customRender: 'nickname',
    },
  },
  {
    title: '手机号',
    dataIndex: 'phone',
  },
  {
    title: '支付金额',
    dataIndex: 'price',
    scopedSlots: {
      customRender: 'price',
    },
  },
  {
    title: '订单状态',
    dataIndex: 'state',
    scopedSlots: {
      customRender: 'state',
    },
  },
  {
    title: '下单时间',
    dataIndex: 'addtime',
    scopedSlots: {
      customRender: 'addtime',
    },
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: {
      customRender: 'action',
    },
  },
]

export default {
  name: 'TableList',
  components: {
    STable,
    Ellipsis,
    OrderInfoForm,
  },
  data() {
    this.columns = columns
    return {
      mdl: {},
      questionData: {},
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        parameter.page = parameter.pageNo
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        console.log('loadData request parameters:', requestParameters)
        return GetOrderList(requestParameters).then((res) => {
          if (!res.data.data) {
            res.data.data = []
          }
          return res.data
        })
      },
    }
  },
  methods: {
    showInfo(record) {
      this.mdl = record
      this.$refs.orderInfoForm.add(record)
    },
    refreshTable() {
      that.$refs.table.refresh()
    },
    finishOrder(record) {
      var that = this
      FinishOrder({
        id: record.id,
      }).then(function (res) {
        if (res.code == 0) {
          that.$refs.table.refresh()
        }
      })
    },
  },
}
</script>

<style>
</style>
